<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
    <meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
    <link rel="stylesheet" href="CSS/index.css"></link>
    <title>百度地图API自定义地图</title>
    <!--引用百度地图API-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Az7pATeNW5vM8HmZXxDXyCCK0EeM22Hc"></script>
</head>

<body>
<script src="JS/flexible.js"></script>
<!--百度地图容器-->
<div style="width:700px;height:1080px;border:#ccc solid 1px;font-size:12px" id="map"></div>
</body>
<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMapOverlay();//向地图添加覆盖物
    }
    function createMap(){
        map = new BMap.Map("map");
        map.centerAndZoom(new BMap.Point(119.529366,39.923662),16);
    }
    function setMapEvent(){
        map.enableScrollWheelZoom();
        map.enableKeyboard();
        map.enableDragging();
        map.enableDoubleClickZoom()
    }
    function addClickHandler(target,window){
        target.addEventListener("click",function(){
            target.openInfoWindow(window);
        });
    }
    function addMapOverlay(){
        var markers = [
            {content:"电气学院",title:"电气学院",imageOffset: {width:0,height:3},position:{lat:39.91633,lng:119.528023}},
            {content:"艺术学院",title:"艺术学院",imageOffset: {width:0,height:3},position:{lat:39.919671,lng:119.526132}},
            {content:"西校区食堂",title:"西校区食堂",imageOffset: {width:0,height:3},position:{lat:39.913788,lng:119.527179}},
            {content:"四组团",title:"四组团",imageOffset: {width:0,height:3},position:{lat:39.923604,lng:119.529124}},
            {content:"里仁学院",title:"里仁学院",imageOffset: {width:0,height:3},position:{lat:39.912532,lng:119.533435}},
            {content:"理学院",title:"理学院",imageOffset: {width:0,height:3},position:{lat:39.924669,lng:119.527111}},
            {content:"经管学院",title:"经管学院",imageOffset: {width:0,height:3},position:{lat:39.92075,lng:119.528091}},
            {content:"信息馆",title:"信息馆",imageOffset: {width:0,height:3},position:{lat:39.924727,lng:119.527938}},
            {content:"西三",title:"西三",imageOffset: {width:0,height:3},position:{lat:39.916552,lng:119.53013}}
        ];
        for(var index = 0; index < markers.length; index++ ){
            var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
            var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
                    imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
                })});
            var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
            var opts = {
                width: 200,
                title: markers[index].title,
                enableMessage: false
            };
            var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
            marker.setLabel(label);
            addClickHandler(marker,infoWindow);
            map.addOverlay(marker);
        };
    }
    //向地图添加控件
    function addMapControl(){
        var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
        scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
        map.addControl(scaleControl);
        var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
        map.addControl(navControl);
        var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
        map.addControl(overviewControl);
    }
    var map;
    initMap();
</script>
</html>

<!--<!DOCTYPE html>-->
<!--<html>-->
<!--<head>-->
<!--    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />-->
<!--    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />-->
<!--    <title>Baidu Map </title>-->
<!--    <style type="text/css">-->
<!--        html{height:100%}-->
<!--        body{height:100%;margin:0px;padding:0px}-->
<!--        #container{height:100%}-->
<!--    </style>-->
<!--    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=Az7pATeNW5vM8HmZXxDXyCCK0EeM22Hc"></script>-->
<!--</head>-->
<!--<body>-->
<!--<div id="container"></div>-->
<!--<script type="text/javascript">-->
<!--    var map = new BMapGL.Map("container");          // 创建地图实例 必须要将地图实例放在一个ID块内-->
<!--    var point = new BMapGL.Point(119.541, 39.916);  // 创建点坐标-->
<!--    map.centerAndZoom(point, 16);                 // 初始化地图，设置中心点坐标和地图缩放级别-->
<!--    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放-->
<!--    //map.setMapType(BMAP_EARTH_MAP);-->
<!--    map.setHeading(0);   //设置地图旋转角度-->
<!--    map.setTilt(15.5);       //设置地图的倾斜角度-->
<!--    var navigationSite = {-->
<!--        anchor: BMAP_ANCHOR_TOP_RIGHT,-->
<!--        type:  BMAP_NAVIGATION_CONTROL_PAN,-->
<!--        enableGeolocation: true-->
<!--    };-->
<!--    var navCtrl = new BMapGL.NavigationControl(navigationSite);-->
<!--    map.addControl(navCtrl);-->
<!--    var zoomSite = {-->
<!--        anchor: BMAP_ANCHOR_TOP_RIGHT,-->
<!--        type:  BMAP_NAVIGATION_CONTROL_LARGE,-->
<!--        enableGeolocation: true-->
<!--    };-->
<!--    var zoomCtrl = new BMapGL.ZoomControl(zoomSite);-->
<!--    map.addControl(zoomCtrl);-->
<!--    var scaleCtrlSite = {-->
<!--        anchor: BMAP_ANCHOR_BOTTOM_RIGHT-->
<!--    };-->
<!--    var scaleCtrl = new BMapGL.ScaleControl(scaleCtrlSite);-->
<!--    map.addControl(scaleCtrl);-->
<!--    var cityCtrlSite = {-->
<!--        anchor: BMAP_ANCHOR_TOP_LEFT,-->
<!--        type:BMAP_NAVIGATION_CONTROL_LARGE-->
<!--    };-->
<!--    map.addControl(new BMapGL.MapTypeControl(cityCtrlSite));-->
<!--</script>-->
<!--</body>-->
<!--</html>-->